<template>
	<view class="content">
		<u-navbar title="线下余额收款明细" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="filtrate">
			<view class="filtrate_left">
				<search-button-input></search-button-input>
			</view>
			<view class="filtrate_right" @click="show = true">
				筛选
			</view>
		</view>
		<!-- 	<view class="bllance_content">
			<view class="bllance_item">
				<view class="time">
					时间：2023-12-26 09:26:03
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="client_info">
					<view class="client_name">
						客户姓名：微信用户
					</view>
					<view class="client_tel">
						手机号：18868875881
					</view>
				</view>
				<view class="money">
					收款金额 89.7元
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="gathering">
					<view class="gathering_left">
						收款员工：微信用户
					</view>
					<view class="gathering_right">
						员工手机：18868875881
					</view>
				</view>
			</view>
			<view class="bllance_item">
				<view class="time">
					时间：2023-12-26 09:26:03
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="client_info">
					<view class="client_name">
						客户姓名：微信用户
					</view>
					<view class="client_tel">
						手机号：18868875881
					</view>
				</view>
				<view class="money">
					收款金额 89.7元
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="gathering">
					<view class="gathering_left">
						收款员工：微信用户
					</view>
					<view class="gathering_right">
						员工手机：18868875881
					</view>
				</view>
			</view>
			<view class="bllance_item">
				<view class="time">
					时间：2023-12-26 09:26:03
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="client_info">
					<view class="client_name">
						客户姓名：微信用户
					</view>
					<view class="client_tel">
						手机号：18868875881
					</view>
				</view>
				<view class="money">
					收款金额 89.7元
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="gathering">
					<view class="gathering_left">
						收款员工：微信用户
					</view>
					<view class="gathering_right">
						员工手机：18868875881
					</view>
				</view>
			</view>

		</view> -->
		<u-popup :show="show" mode="right" :customStyle="customStyle" @close="close" @open="open">
			<view class="filtrate_box">
				<view class="status">
					<view class="status_text">
						状态：
					</view>
					<view class="inp">
						<input placeholder="请输入金额" type="text" />
					</view>
				</view>
				<view class="date">
					<view class="status_text">
						日期：
					</view>
					<view class="date_list" @click="calendarShow = true">
						<view class="date_item">

						</view>
						<view class="date_item">

						</view>
						<u-calendar :showLunar="true" :show="calendarShow" @close="calendarClose" :mode="mode"
							@confirm="confirm"></u-calendar>
					</view>
				</view>
				<view class="btns">
					<view class="btn left">重置</view>
					<view class="btn right">搜索</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff'
				},
				show: true,
				titleStyle: {
					color: '#fff',
				},
				show: true,
				customStyle: {
					'margin-top': '88rpx',
					// #ifdef MP
					'margin-top': '180rpx'
					// #endif
				},
				radiovalue1: 'perform',
				show: false,
				calendarShow: false,
				mode: 'range'
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			calendarClose() {
				this.calendarShow = false
				// console.log('close');
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		height: 100vh;

		.filtrate {
			display: flex;
			background-color: #fff;
			justify-content: space-between;
			align-items: center;

			.filtrate_left {
				width: 660rpx;
			}

			.filtrate_right {
				padding-right: 25rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #FF594D;
				white-space: nowrap;
			}
		}

		.bllance_content {
			padding: 20rpx;

			.bllance_item {
				padding: 24rpx 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;

				.time {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #777777;
				}

				.line {
					padding: 10rpx 0 20rpx;
				}

				.client_info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.client_name {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						color: #333332;
						padding-bottom: 20rpx;
					}

					.client_tel {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #777777;
					}
				}

				.money {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #F44236;
					padding-bottom: 10rpx;
				}

				.gathering {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #777777;
				}
			}
		}

		.filtrate_box {
			width: 640rpx;
			padding: 60rpx 20rpx 0;
			box-sizing: border-box;

			.status_text {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FF594D;
				padding-bottom: 20rpx;
			}

			.date {
				.date_list {
					display: flex;
				}

				.date_item {
					width: 200rpx;
					height: 56rpx;
					border-radius: 100rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					line-height: 56rpx;
					text-align: center;
					color: #777777;
					margin-right: 30rpx;
					background-color: #F3F3F3;
				}
			}

			.inp {
				background-color: #f3f3f3;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				input {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #D4D4D4;
					height: 68rpx;
					box-sizing: border-box;
					padding: 20rpx 30rpx;

				}
			}

			.btns {
				display: flex;
				margin-top: 128rpx;
				padding: 0 60rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					width: 200rpx;
					box-sizing: border-box;
					height: 44rpx;
					line-height: 44rpx;
					box-sizing: border-box;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					border-radius: 33rpx;
				}

				.left {
					color: #FF594D;
					border: 2rpx solid #FF594D;
				}

				.right {
					background: #FF594D;
					color: #fff;
				}
			}
		}
	}
</style>